<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件和局部组件</title>
</head>
<body>
<div id="app">
  <!--  3、组件的使用-->
  <!--  全局组件的使用-->
  <span style="color: red">全局组件</span>
  <my-div></my-div>
  <my-div></my-div>

  <!--  局部组件，在本实例对象中不会生效，该组件定义在app2中-->
  <span style="color: red">my-div2局部组件不在非注册vue实例中显示</span>
  <my-div2></my-div2>
</div>
<hr>
<div id="app2">
  <!--  3、组件的使用-->
  <!--  全局组件，在任何vue实例都可以使用-->
  <span style="color: red">全局组件</span>
  <my-div></my-div>

  <!--  局部组件，只在本实例对象中生效-->
  <span style="color: red">my-div2局部组件显示(在注册vue实例对象中)</span>
  <my-div2></my-div2>
</div>

<script src="../js/vue.js"></script>
<script>

  // ■【全局组件的方式，可以在多个vue实例使用】
  // 1、创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容
  const myDiv = Vue.extend({
    template: `
       <div>
         <h2>我是标题</h2>
         <p>我是内容一</p>
         <p>我是内容二</p>
       </div>`
  })

  // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象
  Vue.component('myDiv', myDiv)

  // -----------------------------------------------------------------------------------------------


  // vue实例1
  const app = new Vue({
    el: "#app",
    data: {}
  });

  // vue实例2
  const app2 = new Vue({
    el: "#app2",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    components: {
      myDiv2: myDiv
    }
  });
</script>
</body>
</html>